<template>
    <view>
        <nut-popup closeable :visible="props.isMyShow" @click-overlay="diaClose" @click-close-icon="diaClose" round
            position="bottom" close-on-click-overlay>
            <view class="costdetail">
                <view class="tabbar">费用明细</view>
                <view class="content costcontent">
                    <h3>合计费用</h3>
                    <h2><span>¥</span>{{ totalPay }}</h2>

                    <view v-for="(item, index) in payInfo" :key="index">
                        <p class="first">
                            <span>{{ item.ssopRemark }}</span>
                            <span>¥
                                {{ item.paid == 0 ? item.actualMoney - item.paidMoney : 0 }}</span>
                        </p>
                    </view>
                </view>
            </view>
        </nut-popup>
    </view>
</template>
             
<script lang="ts" setup>
import { ref } from 'vue';
import useOrderStore from '@/store/order';
const orderStore = useOrderStore()

const props = defineProps<{
    isMyShow: boolean
}>()

const totalPay = ref(0)
const emit = defineEmits(['closeDetailInfo'])
const payInfo = ref<any>([])
payInfo.value = orderStore.orderInfo.costList


function addPay() {
    payInfo.value.forEach((item) => {
        if (item.paid == 0) {
            totalPay.value += item.actualMoney;
        }
    });
}
addPay()


function diaClose() {
    emit("closeDetailInfo");
}
</script>
<style lang='scss'>
* {
    box-sizing: border-box;
}

.costdetail {
    width: 100%;
    height: 100%;
    background-color: #fff;

    .tabbar {
        width: 100%;
        height: 112rpx;
        background-color: #f8f9fa;
        color: #252525;
        font-size: 32rpx;
        font-weight: 600;
        line-height: 112rpx;
        padding-left: 24rpx;
        box-sizing: border-box;
    }

    .content {
        width: 100%;
        padding: 40rpx 116rpx 0;
        box-sizing: border-box;

        h3,
        h2 {
            text-align: center;
        }

        h3 {
            font-size: 24rpx;
            color: #252525;
            margin: 0;
            font-weight: 400;
        }

        h2 {
            font-size: 76rpx;
            font-weight: 600;
            color: #0966ff;
            margin: 14rpx 0 20rpx 0;
            display: flex;
            justify-content: center;

            span {
                font-size: 40rpx;
                padding-right: 8rpx;
                margin-top: 20rpx;
                box-sizing: border-box;
            }
        }

        p {
            display: flex;
            justify-content: space-between;
            color: #666;
            font-size: 24rpx;
            margin: 28rpx 0;

            .van-icon {
                box-sizing: border-box;
                padding-right: 6rpx;
            }
        }

        .first {
            span {
                color: #252525;
                font-weight: 600;
                font-size: 28rpx;

                &:nth-child(2) {
                    font-weight: 400;
                }
            }
        }
    }

    .costcontent {
        margin-bottom: 240rpx;
    }
}
</style>